<template>
	<view style="width: 100%;"
		class="shop-card-container"
		@click="toDetail && jumpUrl(`/pages/user/comerciante/detail/detail?merchantId=${ item.merchantId  }`)">
		<view class="u-radius-8 shop-card flex" :style="{ width: '100%', background }">
			<view class="u-radius-14 shop-img clear-flex u-m-r-14">
				<x-image :src="showImage(item.logoImgUrl, 'logo')" />
			</view>

			<view class="clear-flex">
				<view class="u-f-34 u-lh-48 font-medio">{{ item.name }}</view>

				<view class="flex-center-between">
					<x-rate :value="shopScore || 5"></x-rate>

					<view class="flex-center">
						<image src="@/static/image/common/local_icon.png" style="width: 28rpx; height: 28rpx;"
							class="clear-flex"></image>

						<view class="u-m-l-4 u-f-26 u-lh-36 color-grew clear-flex">{{ countDistance(item) }}
						</view>
					</view>
				</view>

				<view class="flex-center u-m-t-4 u-f-24 u-lh-34 color-grew" style="width: calc(100vw - 260rpx);">
					<view class="clear-flex">{{ item.categoryTitle ? `${ item.categoryTitle }.` : '' }}</view>
					<view class="linecamp-1">{{ formatAddress(item, 1) }}</view>
				</view>

				<view class="u-m-t-14 shop-phone flex" @click.stop="changeCallAction(item)">
					<image src="@/static/image/common/phone_grew.png" style="width: 28rpx; height: 28rpx"
						class="clear-flex u-p-t-6"></image>
					<view class="u-m-l-6 u-f-24 u-lh-34">{{ item.phone }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				default: () => ({})
			},
			background: {
				type: String,
				default: '#FFFFFF'
			},
			instance: {
				default: 0
			},
			toDetail: {
				default: true
			}
		},
		data() {
			return {}
		},
		computed: {
			shopScore() {
				let { totalScore, totalComments } = this.item
				return (totalScore || 0) / (totalComments || 1)
			}
		},
		mounted() {
			this.query('.shop-card-container').then(res => {
				console.log(res)
			})
		},
		methods: {
			async changeCallAction(item) {
				let { prefixCode, phone } = item
				let result = await this.callAction((prefixCode || '') + phone)
				result && this.$emit('phone', result)
			},
			formatDistance(num = 0) {
				if (num > 999) {
					return (num / 1000).toFixed(2) + 'km'
				} else {
					return parseInt(num) + 'm'
				}
			},
			// 计算商家距离
			countDistance({ latitude, longitude }, center) {
				let clat, clng;
				if (center) {
					clat = center.latitude
					clng = center.longitude
				} else if (this.locationLatlng) {
					let [lat, lng] = this.locationLatlng.split(',')
					
					clat = Number(lat)
					clng = Number(lng)
				}
				let countFn = (n = 0) => (n * Math.PI / 180.0)
				var radLat1 = countFn(latitude)
				var radLat2 = countFn(clat)
				var a = radLat1 - radLat2;
				var b = countFn(longitude) - countFn(clng);
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137;
				s = Math.round(s * 10000) / 10000;
				
				return this.formatDistance(s * 1000)
			}
		}
	}
</script>

<style scoped lang="scss">
	.shop {
		&-card {
			padding: 16rpx 14rpx 18rpx 14rpx;
			border-radius: 8rpx;

		}

		&-img {
			width: 170rpx;
			height: 170rpx;
			border-radius: 14rpx;
			overflow: hidden;
			background-color: #f9f9f9;
		}

		&-phone {
			padding: 2rpx 10rpx;
			height: 38rpx;
			width: max-content;
			color: #888888;
			background-color: #F3F4F5
		}
	}
</style>
